﻿define(function (require) {
    var AppSetView = require('view/AppSetView');

    return Backbone.View.extend({

        el: $("#app-type"),
        events: {
            'click #app-type li': 'clickItem'
        },

        initialize: function () {
            _.bindAll(this, 'render', 'addOneAppFunc', 'clickItem');
            this.model.view = this;
        },

        firstTime: true,

        render: function () {
            this.model.each(this.addOneAppFunc);
            //            $($(this.el).find('#app-type li')[this.currentIndex]).addClass('current');


            if (this.firstTime && this.model.models.length > 0) {
                this.refreshAppFuncListCallback(this.model.models[0].get('TypeName'));
                this.currentIndex = 0;

                $($(this.el).find('span')[this.currentIndex]).addClass('tabcurrent');
                this.firstTime = false;
            }
            return this;
        },

        currentIndex: 0,

        clickItem: function (e) {
            var element = $(e.target);
            $(this.el).find('span').removeClass('tabcurrent');
            element.addClass('tabcurrent');

            var index = element.parents('li').data('index');
            this.currentIndex = index;
            var categoryName = this.model.models[index].get('TypeName');
            this.refreshAppFuncListCallback(categoryName);
        },

        addOneAppFunc: function (appFunc, index) {
            var appSetView = new AppSetView({ model: new AppFunc(appFunc) });
            var appFuncDom = appSetView.render().el;
            $(appFuncDom).data('index', index);

            $(this.el).append(appSetView.render().el);
        },

        refreshAppFuncListCallback: function (name) {
        }
    });
});